﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="Assignment2_OrderSystem.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Home</title>

    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

    <!-- My CSS -->
    <link href="Design/colors.css" rel="stylesheet" type="text/css" />
    <link href="Design/fonts.css" rel="stylesheet" type="text/css" />
    <link href="Design/style.css" rel="stylesheet" type="text/css" />

    <!-- Latest compiled and minified jQuery -->
    <script src="JavaScript/jquery-2.1.1.min.js"></script>

    <!-- Bootstrap -->
    <link href="Bootstrap3.11/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="Bootstrap3.11/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <script src="Bootstrap3.11/js/bootstrap.min.js"></script>

    <!-- Holder -->
    <script src="Holder/holder.js"></script>
</head>
<body class="background-color-lightblue">
    <form id="form1" runat="server">
        <div class="container background-color-azure">
            <div id="shortcuts" class="row background-color-azure">
                <ol class="breadcrumb pull-left" style="background-color: azure; margin-top: 0.5%; margin-bottom: 0%;">
                    <li><a href="Home.aspx"><i class="icon-home"></i>
                        Home 
                    </a>
                    </li>
                    <li><a href="#"><i class="icon-user"></i>
                        About 
                    </a>
                    </li>
                    <li><a href="#"><i class="icon-envelope"></i>
                        Contact 
                    </a>
                    </li>
                </ol>
                <ol class="breadcrumb pull-right" style="background-color: azure; margin-top: 0.5%; margin-bottom: 0%;">
                    <li>
                        <asp:LoginView ID="LoginView" runat="server">
                            <AnonymousTemplate>
                                <asp:Label Text="Hello Guest"
                                    runat="server" ID="lblGuest" />
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                <asp:Label ID="lblHello" Text="Hello " runat="server" />
                                <asp:LoginName runat="server" ID="LoginName" />
                            </LoggedInTemplate>
                        </asp:LoginView>
                    </li>
                    <li>
                        <a>
                            <asp:LoginStatus ID="LoginStatus" Font-Size="Medium" runat="server" LogoutText="Log out" LoginText="Log in" LogoutPageUrl="Home.aspx" />
                        </a>
                    </li>
                    <li id="liRegister" runat="server">
                        <a href="Register.aspx">Register</a>
                    </li>
                </ol>
            </div>
            <div id="header" class="row-fluid background-color-mylightblue shadow border">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="Images/banner1.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Shop</h2>
                                <p>Best Prices</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/banner2.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Shop</h2>
                                <p>Newest Phones</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/banner3.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Shop</h2>
                                <p>Full Warranty</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/banner4.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Shop</h2>
                                <p>Best Deals</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="Images/banner5.jpg" />
                            <div class="carousel-caption">
                                <h2>Online Cellphone Shop</h2>
                                <p>Fast Delivery</p>
                            </div>
                        </div>
                    </div>
                    <script>
                        $('.carousel').carousel({
                            interval: 4000
                        });
                    </script>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
            <div id="menu" class="row-fluid">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">Online Shop </a>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="Home.aspx"><span class="glyphicon glyphicon-home"></span>
                                    Home </a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-list"></span>
                                    All Products</a></li>
                                <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>
                                    My Shoping Cart </a></li>
                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container-fluid -->
                </nav>
            </div>
            <div id="content" class="row-fluid form-inline">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <span class="glyphicon glyphicon-star"></span>
                        Latest Products
                    </div>
                    <div class="panel-body">
                        <div class="row center-block">
                            <div class="col-sm-4 col-md-4">
                                <div class="thumbnail">
                                    <img class="img-circle" data-src="holder.js/200x200/sky" alt="..." />
                                    <div class="caption text-center">
                                        <h3>Product Name</h3>
                                        <p>Some description about the product, and more.</p>
                                        <p class="text-center">
                                            <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-gift"></span>
                                                Buy It!</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-info-sign"></span>
                                                    More Info</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <div class="thumbnail">
                                    <img class="img-circle" data-src="holder.js/200x200/sky" alt="..." />
                                    <div class="caption text-center">
                                        <h3>Product Name</h3>
                                        <p>Some description about the product, and more.</p>
                                        <p class="text-center">
                                            <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-gift"></span>
                                                Buy It!</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-info-sign"></span>
                                                    More Info</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 col-md-4">
                                <div class="thumbnail">
                                    <img class="img-circle" data-src="holder.js/200x200/sky" alt="..." />
                                    <div class="caption text-center">
                                        <h3>Product Name</h3>
                                        <p>Some description about the product, and more.</p>
                                        <p class="text-center">
                                            <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-gift"></span>
                                                Buy It!</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-info-sign"></span>
                                                    More Info</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="row center-block">
                                <div class="col-sm-4 col-md-4">
                                    <div class="thumbnail">
                                        <img class="img-circle" data-src="holder.js/200x200/sky" alt="..." />
                                        <div class="caption text-center">
                                            <h3>Product Name</h3>
                                            <p>Some description about the product, and more.</p>
                                            <p class="text-center">
                                                <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-gift"></span>
                                                    Buy It!</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-info-sign"></span>
                                                        More Info</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4 col-md-4">
                                    <div class="thumbnail">
                                        <img class="img-circle" data-src="holder.js/200x200/sky" alt="..." />
                                        <div class="caption text-center">
                                            <h3>Product Name</h3>
                                            <p>Some description about the product, and more.</p>
                                            <p class="text-center">
                                                <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-gift"></span>
                                                    Buy It!</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-info-sign"></span>
                                                        More Info</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4 col-md-4">
                                    <div class="thumbnail">
                                        <img class="img-circle" data-src="holder.js/200x200/sky" alt="..." />
                                        <div class="caption text-center">
                                            <h3>Product Name</h3>
                                            <p>Some description about the product, and more.</p>
                                            <p class="text-center">
                                                <a href="#" class="btn btn-danger" role="button"><span class="glyphicon glyphicon-gift"></span>
                                                    Buy It!</a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-info-sign"></span>
                                                        More Info</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="pager">
                    <li class="previous disabled"><a href="#">Previous</a></li>
                    <li class="next disabled"><a href="#">Next</a></li>
                </ul>
            </div>
        </div>
        <div id="footer" class="text-center center-block background-color-lightblue border-color">
            <br />
            <br />
            <br />
            <div class="row">
                <p>This site designed and build as an assingment for the course "Web Development Environments", 2014, BGU</p>
                <p>Copyright &copy; Dan Ziv & Daniel Shefer | <a href="http://www.w3schools.com/html/html5_intro.asp">HTML5</a> | <a href="http://www.w3schools.com/css/css3_intro.asp">CSS3</a> | <a href="http://getbootstrap.com/">Bootstrap 3.11</a></p>
            </div>
            <br />
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-default">
                    <i class="icon-home"></i>
                    Home</button>
                <button type="button" class="btn btn-default">
                    <i class="icon-user"></i>
                    About</button>
                <button type="button" class="btn btn-default">
                    <i class="icon-envelope"></i>
                    Contact</button>
            </div>
        </div>
    </form>
</body>
</html>
